<template>
  <div>
    <!-- 占位算高度用, 为了不让用户看到500ms的收缩感 -->
    <div class="deliveryInstructions-main" style="position:fixed; top:-9999px;">
      <div class="deliveryInstructions__body">
        <div class="first">
          <div class="left-box">
            <div id="freightPolicyOpenView_dummy" class="content">
              <div class="item" v-for="item in consultantPolicyObj.freightPolicy" :key="item">{{item.text}}</div>
            </div>
          </div>
        </div>
        <div class="second">
          <div class="left-box">
            <div id="timePolicyOpenView_dummy" class="content">
              <div class="item" v-for="item in consultantPolicyObj.timePolicy" :key="item">{{item.text}}</div>
            </div>
          </div>
        </div>
        <div class="third">
          <div class="left-box">
            <div id="contactPolicyOpenView_dummy" class="content">
              <div class="item" v-for="item in consultantPolicyObj.contactPolicy" :key="item">{{item.text}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="deliveryInstructions-main" v-if="isShowFreightPolicyBox || isShowTimePolicyBox">
      <div class="deliveryInstructions__body">
        <div class="first" v-if="isShowFreightPolicyBox">
          <div class="left-box">
            <div class="label">配送费用：</div>
            <div id="freightPolicyOpenView" class="content" :style="{'height': freightPolicyOpen ? 'auto' : '.56rem'}">
              <!-- <parser :selectable="true" class="item" v-for="item in consultantPolicyObj.freightPolicy" :key="item" :html="item.virtualDom"></parser> -->
              <!-- <span class="item" v-for="item in consultantPolicyObj.freightPolicy" :key="item">{{item.text}}</span> -->
              <div class="virtualDomWrapper">
                <div class="virtualDomList">
                  <div v-for="(virtualDom_div_item, virtualDom_divIndex) in consultantPolicyObj.freightPolicy" :key="virtualDom_divIndex">
                    <template v-if="virtualDom_div_item.virtualDom.length > 0">
                      <div class="item" v-for="(virtualDom_span_item, virtualDom_span_index) in virtualDom_div_item.virtualDom" :key="virtualDom_span_index">
                        <span v-if="virtualDom_span_item.name === 'span'">{{virtualDom_span_item.text}}</span>
                        <span @click="handleClickCangpeiTel(virtualDom_span_item)" v-if="virtualDom_span_item.name === 'text'" style='color: #377de8; text-decoration: underline;'>{{virtualDom_span_item.text}}</span>
                      </div>
                    </template>
                    <template v-else>
                      <div class="item">
                        <span v-if="virtualDom_div_item.name === 'span'">{{virtualDom_div_item.text}}</span>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="right_btn" v-show="isShowFreightPolicyOpen" v-if="freightPolicyOpen" @click="freightPolicyOpen = false">收起</div>
          <div class="right_btn" v-show="isShowFreightPolicyOpen" v-else @click="freightPolicyOpen = true">详情123</div>
        </div>
        <div class="second" v-if="isShowTimePolicyBox">
          <div class="left-box">
            <div class="label">配送时间：</div>
            <div id="timePolicyOpenView" class="content" :style="{'height': timePolicyOpen ? 'auto' : '.56rem'}">
              <!-- <parser :selectable="true" class="item" v-for="item in consultantPolicyObj.timePolicy" :key="item" :html="item.virtualDom"></parser> -->
              <!-- <span class="item" v-for="item in consultantPolicyObj.timePolicy" :key="item">{{item.text}}</span> -->
              <div class="virtualDomWrapper">
                <div class="virtualDomList">
                  <div v-for="(virtualDom_div_item, virtualDom_divIndex) in consultantPolicyObj.timePolicy" :key="virtualDom_divIndex">
                    <template v-if="virtualDom_div_item.virtualDom.length > 0">
                      <div class="item" v-for="(virtualDom_span_item, virtualDom_span_index) in virtualDom_div_item.virtualDom" :key="virtualDom_span_index">
                        <span v-if="virtualDom_span_item.name === 'span'">{{virtualDom_span_item.text}}</span>
                        <span @click="handleClickCangpeiTel(virtualDom_span_item)" v-if="virtualDom_span_item.name === 'text'" style='color: #377de8; text-decoration: underline;'>{{virtualDom_span_item.text}}</span>
                      </div>
                    </template>
                    <template v-else>
                      <div class="item">
                        <span v-if="virtualDom_div_item.name === 'span'">{{virtualDom_div_item.text}}</span>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="right_btn" v-show="isShowTimePolicyOpen" v-if="timePolicyOpen" @click="timePolicyOpen = false">收起</div>
          <div class="right_btn" v-show="isShowTimePolicyOpen" v-else @click="timePolicyOpen = true">详情</div>
        </div>
        <div class="third" v-if="isShowContactPolicyBox">
          <div class="left-box">
            <div class="label">联系客服：</div>
            <div id="contactPolicyOpenView" class="content" :style="{'height': contactPolicyOpen ? 'auto' : '.56rem'}">
              <!-- 以下是mpvue和小程序写法, 都可以使用 -->
              <!-- <parser :selectable="true" class="item" v-for="item in consultantPolicyObj.contactPolicy" :key="item" :html="item.virtualDom"></parser> -->
              <!-- <div class="item" v-for="item in consultantPolicyObj.contactPolicy" :key="item" v-html="item.virtualDom"></div> -->
              <!-- <rich-text class="item" v-for="item in consultantPolicyObj.contactPolicy" :key="item" :nodes="item.virtualDom"></rich-text> -->
              <div class="virtualDomWrapper">
                <div class="virtualDomList">
                  <div v-for="(virtualDom_div_item, virtualDom_divIndex) in consultantPolicyObj.contactPolicy" :key="virtualDom_divIndex">
                    <template v-if="virtualDom_div_item.virtualDom.length > 0">
                      <div class="item" v-for="(virtualDom_span_item, virtualDom_span_index) in virtualDom_div_item.virtualDom" :key="virtualDom_span_index">
                        <span v-if="virtualDom_span_item.name === 'span'">{{virtualDom_span_item.text}}</span>
                        <!-- 注: 使用user-select 在ios手机上回造成部分内容不展示的bug, 目前先舍弃 -->
                        <span @click="handleClickCangpeiTel(virtualDom_span_item)" v-if="virtualDom_span_item.name === 'text'" style='color: #377de8; text-decoration: underline;'>{{virtualDom_span_item.text}}</span>
                      </div>
                    </template>
                    <template v-else>
                      <div class="item">
                        <span v-if="virtualDom_div_item.name === 'span'">{{virtualDom_div_item.text}}</span>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="right_btn" v-show="isShowContactPolicyOpen" v-if="contactPolicyOpen" @click="contactPolicyOpen = false">收起</div>
          <div class="right_btn" v-show="isShowContactPolicyOpen" v-else @click="contactPolicyOpen = true">详情</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      consultantPolicyObj: {
        freightPolicy: '',
        timePolicy: '',
        contactPolicy: '',
      }, // 配送政策大集合
      isShowFreightPolicyBox: false,
      isShowTimePolicyBox: false,
      isShowContactPolicyBox: false,
      freightPolicyOpen: true, // 配送费用是否需要展开
      timePolicyOpen: true, // 配送费用是否展示
      contactPolicyOpen: true, // 配送费用是否展示
      isShowFreightPolicyOpen: false, // 配送费用是否需要展开
      isShowTimePolicyOpen: false, // 配送费用是否需要展开
      isShowContactPolicyOpen: false, // 配送费用是否需要展开
    }
  },
  methods: {
    regReplaceUtilsPhone(content) {
      let reg = /((((13[0-9])|(15[^4])|(18[0,1,2,3,5-9])|(17[0-8])|(147))\d{8})|((\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}))?/g;
      content = content.replace(reg, function (match) {
        if (match) {
          // return `<span data-phone={{${match}}} style='color: #377de8; text-decoration: underline;'>${match}</span>`
          return `<cangpei-tel>${match}</cangpei-tel>`
        } else {
          return ""
        }
      });
      let reg1 = /400-[016789]\d{2}-\d{4}|400[016789]\d{6}/g
      content = content.replace(reg1, function (match) {
        if (match) {
          // return `<span data-phone={{${match}}} style='color: #377de8; text-decoration: underline;'>${match}</span>`
          return `<cangpei-tel>${match}</cangpei-tel>`
        } else {
          return ""
        }
      });
      return this.splitUtilsCangpeiTel(content);
    },
    splitUtilsCangpeiTel(text) {
      let renderDom = [];
      let textList = text.split(/\n/);
      let left = -1;
      let right = -1;
      for (let i = 0; i < textList.length; i++) {
        let temp = textList[i];
        while (temp !== "") {
          left = temp.indexOf("<cangpei-tel>");
          right = temp.indexOf("</cangpei-tel>");
          switch (left) {
            case 0:
              if (right === -1) {
                renderDom.push({
                  name: "span",
                  text: temp
                });
                temp = "";
              } else {
                let cangpeiTelAll = temp.slice(0, right + 14);
                let cangpeiTelStr = cangpeiTelAll.slice(left + 13, right);
                if (cangpeiTelStr) {
                  renderDom.push({
                    name: "text",
                    text: cangpeiTelStr
                  });
                  temp = temp.substring(right + 14);
                } else {
                  renderDom.push({
                    name: "span",
                    text: "<cangpei-tel>"
                  });
                  temp = temp.slice(14);
                }
              }
              break;
            case -1:
              renderDom.push({
                name: "span",
                text: temp
              });
              temp = "";
              break;
            default:
              renderDom.push({
                name: "span",
                text: temp.slice(0, left)
              });
              temp = temp.substring(left);
              break;
          }
        }
      }
      return renderDom;
    },
    splitUtilsSpace(text) {
      let renderDom = [];
      let textList = text.split(/\n/);
      let left = -1;
      let right = -1;
      for (let i = 0; i < textList.length; i++) {
        let temp = textList[i];
        while (temp !== "") {
          left = temp.indexOf("[");
          right = temp.indexOf("]");
          switch (left) {
            case 0:
              if (right === -1) {
                renderDom.push({
                  name: "span",
                  text: temp
                });
                temp = "";
              } else {
                let _emoji = temp.slice(0, right + 1);
                if (emojiMap[_emoji]) {
                  renderDom.push({
                    name: "img",
                    src: emojiUrl + emojiMap[_emoji]
                  });
                  temp = temp.substring(right + 1);
                } else {
                  renderDom.push({
                    name: "span",
                    text: "["
                  });
                  temp = temp.slice(1);
                }
              }
              break;
            case -1:
              renderDom.push({
                name: "span",
                text: temp
              });
              temp = "";
              break;
            default:
              renderDom.push({
                name: "span",
                text: temp.slice(0, left)
              });
              temp = temp.substring(left);
              break;
          }
        }
      }
      return renderDom;
    },
    // 配送政策
    actionConsultantPolicy(res) {
      console.log('resresresresres', res);

      let _this = this;

      let freightPolicy = res.freightPolicy;
      let timePolicy = res.timePolicy;
      let contactPolicy = res.contactPolicy;

      let windowWidth = document.documentElement.clientWidth;
      let calcHeight = windowWidth / 400 * 21;

      var needShowFreightPolicy = false;
      var needShowTimePolicy = false;
      var needShowContactPolicy = false;

      if (freightPolicy) {
        needShowFreightPolicy = true;
        this.consultantPolicyObj.freightPolicy = this.splitUtilsSpace(freightPolicy);

        this.consultantPolicyObj.freightPolicy.forEach(item => {
          this.$set(item, 'virtualDom', this.regReplaceUtilsPhone(item.text))
        })
      }
      if (timePolicy) {
        needShowTimePolicy = true;
        this.consultantPolicyObj.timePolicy = this.splitUtilsSpace(timePolicy);

        this.consultantPolicyObj.timePolicy.forEach(item => {
          this.$set(item, 'virtualDom', this.regReplaceUtilsPhone(item.text))
        })
      }
      if (contactPolicy) {
        needShowContactPolicy = true;
        this.consultantPolicyObj.contactPolicy = this.splitUtilsSpace(contactPolicy);
        this.consultantPolicyObj.contactPolicy.forEach(item => {
          this.$set(item, 'virtualDom', this.regReplaceUtilsPhone(item.text))
        })
      }

      console.log('this.consultantPolicyObj', this.consultantPolicyObj);
      

      if (needShowFreightPolicy) {
        this.$nextTick(() => {
          let freightPolicyOpenView_dummy = document.querySelector("#freightPolicyOpenView_dummy");

          console.log('freightPolicyOpenView_dummy.offsetHeight', freightPolicyOpenView_dummy.offsetHeight);
          console.log('calcHeightcalcHeight', calcHeight);

          if (freightPolicyOpenView_dummy.offsetHeight > calcHeight) {
            _this.isShowFreightPolicyOpen = true;
            _this.freightPolicyOpen = false;
          } else {
            _this.freightPolicyOpen = true;
            _this.isShowFreightPolicyOpen = false;
          }
          _this.isShowFreightPolicyBox = true;
        })
      }

      console.log('_this.freightPolicyOpen_this.freightPolicyOpen', _this.freightPolicyOpen);


      if (needShowTimePolicy) {
        this.$nextTick(() => {
          let timePolicyOpenView_dummy = document.querySelector("#timePolicyOpenView_dummy");
          if (timePolicyOpenView_dummy.offsetHeight > calcHeight) {
            _this.isShowTimePolicyOpen = true;
            _this.timePolicyOpen = false;
          } else {
            _this.timePolicyOpen = true;
            _this.isShowTimePolicyOpen = false;
          }
          _this.isShowTimePolicyBox = true;
        })

      }

      if (needShowContactPolicy) {
        this.$nextTick(() => {
          let contactPolicyOpenView_dummy = document.querySelector("#contactPolicyOpenView_dummy");
          if (contactPolicyOpenView_dummy.offsetHeight > calcHeight) {
            _this.isShowContactPolicyOpen = true;
            _this.contactPolicyOpen = false;
          } else {
            _this.contactPolicyOpen = true;
            _this.isShowContactPolicyOpen = false;
          }
          _this.isShowContactPolicyBox = true;

          console.log('_this.isShowContactPolicyOpen', _this.isShowContactPolicyOpen);
          console.log('_this.contactPolicyOpen', _this.contactPolicyOpen);
          console.log('_this.isShowContactPolicyBox', _this.isShowContactPolicyBox);
        })
      }

    },
  },
}
</script>

<style scoped lang="stylus">
.deliveryInstructions-main
  padding 0.32rem 0.4rem
  background #ffffff
  .label
    height 0.56rem
    font-size 0.36rem
    font-weight 600
    color #f84624
    line-height 0.56rem
  .content
    margin-top 0.08rem
    background-color #fff
    overflow hidden
    .item
      font-size 0.32rem
      color #8e8e8e
      line-height 0.56rem
      word-break break-all
      display inline-block
  .first
    margin-bottom 0.24rem
    display flex
    background #fff
    overflow hidden
  .second
    margin-bottom 0.24rem
    display flex
  .third
    margin-bottom 0.24rem
    display flex
  .left-box
    flex 1
  .right_btn
    margin-top 0.64rem
    width 0.74rem
    height 0.56rem
    font-size 0.32rem
    color #377de8
    line-height 0.56rem
    margin-left auto
    cursor pointer
</style>